import React, { Component } from 'react'
import SiderMenu from './SiderMenu'
import { getData } from '@/utils/localData.js';
import Header from './HeaderView'
import Breakcrumbs from './Breakcrumbs.js'
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { Layout } from 'antd';
import Login from '../components/Login'
import styles from './index.less'

export default class BasicLayout extends Component {

  //菜单展开状态
  state = {
    collapsed: false,
  }

  //菜单展开或关闭方法
  onCollapse = (collapsed) => {
      console.log(collapsed);
      this.setState({ collapsed });
  }

  render() {
    const {
      children ,
      route
    } = this.props
    let refreshToken = getData("refreshToken")
    console.log("主页面渲染",refreshToken)
    if(!refreshToken){
      return <Login />
    }
    if (this.props.location.pathname === '/login') {
      return <Login />
    }
    return (
      <Layout style={{ minHeight: '100vh' }} >
        {/* 左侧菜单Layout */}
          <SiderMenu collapsed = {this.state.collapsed} onCollapse = {this.onCollapse} route = {route}/>
        <Layout>
          {/* header */}
          <Header collapsed = {this.state.collapsed} onCollapse = {this.onCollapse} />
          {/* 面包屑导航 */}
          <Breakcrumbs/>
          {/* 主体内容 */}
          <Layout.Content className={styles.content}>
            <TransitionGroup>
              <CSSTransition key={location.pathname} classNames="star" timeout={300}>
                { children }
              </CSSTransition>
            </TransitionGroup>
          </Layout.Content>
        </Layout>
      </Layout>
    )
  }
}

